<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">用户管理</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <!--展示用户表格-->
        <el-table :data="userData" height="525" style="width: 100%" :row-class-name="tableRowClassName">

            <el-table-column label="头像" width="180">
                <template #default="scope">
                    <el-avatar :src="userData[scope.$index].salt" size="medium"></el-avatar>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="账号" width="180"></el-table-column>
            <el-table-column prop="nickName" label="昵称" width="180"></el-table-column>
            <el-table-column prop="token" label="签名"></el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
            <el-table-column width="180" align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="username" size="mini" @change="queryUser" placeholder="输入账号搜索"/>
                </template>
                <template slot-scope="scope"  v-if="userData[scope.$index].id>1">
                    <el-button size="mini" @click="userEdit(userData[scope.$index].id)">修改</el-button>
                    <el-button size="mini" type="danger" @click="userDelete(userData[scope.$index].id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页插件-->
        <el-pagination class="pageModel"
                       background
                       layout="prev, pager, next"
                       :current-page="index"
                       @current-change="updatePage"
                       :page-size="page"
                       :total="sumPage">
        </el-pagination>
        <!--弹出操作框-->
        <el-dialog title="用户操作" :visible.sync="centerDialogVisible" width="30%" center>
            <span>账号：{{sysUser.username}}</span>
            <el-input class="uploadUser" placeholder="昵称" v-model="sysUser.nickName" clearable></el-input>
            <el-input class="uploadUser" placeholder="签名" v-model="sysUser.token" clearable></el-input>
            <el-input class="uploadUser" placeholder="原始密码" v-model="oldPassword" clearable></el-input>
            <el-input class="uploadUser" placeholder="新密码" v-model="newPassword" clearable></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateSysUser">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>确定删除该人员？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delSysUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                //搜索栏的用户账号
                username: '',
                //弹出框
                centerDialogVisible: false,
                dialogVisible: false,
                //当前页数
                index: 1,
                //每页显示多少条数据
                page: 7,
                //总共多少条数据
                sumPage: 0,
                //获取到用户的信息
                userData: [
                    {
                        id: '1',
                        salt: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                        username: 'lisi',
                        nickName: '李四',
                        token: '这是一个签名哈哈哈哈哈哈',
                        createdTime: '2022-04-23 02:23:58',
                    },
                ],
                //单个用户信息
                sysUser: {
                    username: '',
                    nickName: '',
                    token: '',
                },
                //原密码
                oldPassword: '',
                //新密码
                newPassword: '',
                //删除用的id
                delId: 0,
            }
        },
        //加载事件
        created() {
            this.selectSysUsers(this.index, this.page, this.username);
        },
        //函数集群
        methods: {
            //查询用户
            selectSysUsers(index, page, username) {
                axios.post(`/yyds/machine_system/sys-user/listSysUser/${index}/${page}?username=${username}`).then(resp => {
                    console.log(resp.data);
                    this.userData = resp.data.map.items;
                    this.sumPage = resp.data.map.total;
                })
            },
            //隔行换色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            //修改用户时的查询
            userEdit(id) {
                this.centerDialogVisible = true;
                this.delId = id;
                axios.post(`/yyds/machine_system/sys-user/selectByIdSysUser/${id}`).then(resp => {
                    this.sysUser = resp.data.map.item;
                    this.selectSysUsers(this.index, this.page, this.username)
                })
            },
            //删除用户
            userDelete(id) {
                this.dialogVisible = true;
                this.delId = id;
            },
            delSysUser() {
                axios.post(`/yyds/machine_system/sys-user/isDeleteSysUser/${this.delId}`).then(resp => {
                    this.dialogVisible = false;
                    this.selectSysUsers(1, this.page, this.username)
                })
            },
            //模糊查询
            queryUser() {
                this.selectSysUsers(1, this.page, this.username);
            },
            //分页时
            updatePage(val) {
                this.selectSysUsers(val, this.page, this.username);
            },
            //修改信息
            updateSysUser() {
                axios.post("/yyds/machine_system/sys-user/updateSysUser",
                    {
                        "id": this.sysUser.id,
                        "nickName": this.sysUser.nickName,
                        "token": this.sysUser.token,
                        "oldPassword": this.oldPassword,
                        "newPassword": this.newPassword,
                    }).then(resp => {
                    if (resp.data.code == 1) {
                        this.$message({
                            message: "修改成功",
                            type: 'success'
                        });
                        this.centerDialogVisible = false;
                        this.selectSysUsers(this.index, this.page, this.username)
                    } else {
                        this.$message.error('修改失败，请检查密码是否正确');
                    }
                    this.oldPassword = "";
                    this.newPassword = "";
                })

            }
        },
    })
</script>
</body>
</html>